<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const city = window.globalObj.name;
const valueHtml = ref(
  "<p>市级所属人防专业队战时按照市指挥部要求，担负指定区域的平战转换、人员防护、重要目标防护、情报信息保障、综合保障等任务。县（区）所属人防专业队主要担负所在行政区域内的平战转换、人员防护、重要目标防护、情报信息保障、综合保障等任务。</p>"
);
const valueHtml1 = ref(
  `<p>战时按照省防护布势安排，${city}共担负哈尔滨市、齐齐哈尔市2个方向跨区支援任务。</p>`
);

const valueHtml2 = ref(
  "<p>战时辖区内各行政区域间按照方案要求，执行对应行政区域的跨区支援任务，XX县支援XX区、XX区，XX县支援XX区、XX区，XX县、XX县支援XX区。</p>"
);


const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa ({ m: "力量运用-任务区分" }).then((res) => {
    if (res.code !== 200)  return ElMessage.error(res.msg)
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "辖区内基本任务区分")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "跨区支援任务区分")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "辖区内跨行政区支援任务区分")?.v || "";

  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa ({
      m: "力量运用-任务区分",
      data: [
        {
          k: "辖区内基本任务区分",
          v: valueHtml.value,
        },
        {
          k: "跨区支援任务区分",
          v: valueHtml1.value,
        },
        {
          k: "辖区内跨行政区支援任务区分",
          v: valueHtml2.value,
        }
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="辖区内基本任务区分" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="跨区支援任务区分" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>
	
	<FirstTitle name="辖区内跨行政区支援任务区分" class="top-15" />
	<div style="border: 1px solid #ccc" class="top-15">
	  <Toolbar
	    style="border-bottom: 1px solid #ccc"
	    :editor="editorRef2"
	    :defaultConfig="toolbarConfig2"
	    :mode="mode2"
	  />
	  <Editor
	    style="height: 500px; overflow-y: hidden"
	    v-model="valueHtml2"
	    :defaultConfig="editorConfig"
	    :mode="mode2"
	    @onCreated="handleCreated2"
	  />
	</div>



    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>
